<template>
    <message-table :data-source="tableList" :wx_id="$store.state.on_line_weChat_id">
        <template slot="body" slot-scope="props">
            <div class="feed-element">
                <a target="_blank"  :href="urlCheck(props.item.users.headimgurl)" class="pull-left">
                    <img alt="image" class="img-circle" :src="urlCheck(props.item.users.headimgurl)">
                </a>
                <div class="media-body ">
                    <small class="pull-right"></small>
                    <strong>{{props.item.users.nick_name}}</strong>---<strong>{{ReturnArr[props.item.is_return]}}</strong><br>
                    <small class="text-muted">{{changeTime(props.item.CreateTime)}}</small>
                    <div class="well" v-html="changeContent(props.item.content)" v-if="props.item.content !== null">
                        {{changeContent(props.item.content)}}
                    </div>
                    <div class="photos" v-if="props.item.PicUrl !== null">
                        <a target="_blank" :href="props.item.PicUrl"> <img alt="image" class="feed-photo" :src="props.item.PicUrl"></a></div>
                    <div class="pull-right">
                        <button v-on:click="showDialog(props.item.id)" :disabled="getTimeDeff(props.item.created_at)" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 回复</button>
                    </div>
                </div>
            </div>
        </template>
    </message-table>
</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url:'api/WeChat/WeChatMessage',
                }),
                ReturnArr: {'0': '未回复', '1': '已回复'},
            };
        },
        methods: {
            getTimeDeff:function (time) {
                let now = new Date();
                let date = new Date(time);
                let diff = now.getTime()-date.getTime();
                let days=Math.floor(diff/(24*3600*1000))
                if(days<=2){
                    return false
                }else{
                    return true
                }
            },
            showDialog: function (uuid) {
                this.stateManager.SeeDialogVisible = true;
                this.stateManager.SeeModelId = uuid;
            },
            changeTime:function (time) {
                return new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            },
            showDeleteDialog: function (uuid) {
                this.stateManager.deleteDialogVisible = true;
                this.stateManager.deleteModelId = uuid;
            },
            urlCheck:function (url) {
                if(url){
                    return url
                }else{
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
            changeContent(string){
                let qqfaceMap = {"/::)":"0","/::~":"1","/::B":"2","/::|":"3","/:8-)":"4","/::<":"5","/::$":"6","/::X":"7","/::Z":"8","/::'(":"9","/::-|":"10","/::@":"11","/::P":"12","/::D":"13","/::O":"14","/::(":"15","/::+":"16"," /:--b":"17","/::Q":"18","/::T":"19","/:,@P":"20","/:,@-D":"21","/::d":"22","/:,@o":"23","/::g":"24","/:|-)":"25","/::!":"26","/::L":"27","/::>":"28","/::,@":"29","/:,@f":"30","/::-S":"31","/:?":"32","/:,@x":"33","/:,@@":"34","/::8":"35","/:,@!":"36","/:!!!":"37","/:xx":"38","/:bye":"39","/:wipe":"40","/:dig":"41","/:handclap":"42","/:&-(":"43","/:B-)":"44","/:<@":"45","/:@>":"46","/::-O":"47","/:>-|":"48","/:P-(":"49","/::'|":"50","/:X-)":"51","/::*":"52","/:@x":"53","/:8*":"54","/:pd":"55","/:":"56","/:beer":"57","/:basketb":"58","/:oo":"59","/:coffee":"60","/:eat":"61","/:pig":"62","/:rose":"63","/:fade":"64","/:showlove":"65","/:heart":"66","/:break":"67","/:cake":"68","/:li":"69","/:bome":"70","/:kn":"71","/:footb":"72","/:ladybug":"73","/:shit":"74","/:moon":"75","/:sun":"76","/:gift":"77","/:hug":"78","/:strong":"79","/:weak":"80","/:share":"81","/:v":"82","/:@)":"83","/:jj":"84","/:@@":"85","/:bad":"86","/:lvu":"87","/:no":"88","/:ok":"89","/:love":"90","/:":"91","/:jump":"92","/:shake":"93","/:":"94","/:circle":"95","/:kotow":"96","/:turn":"97","/:skip":"98","/:oY":"99","/:#-0":"100","/:hiphot":"101","/:kiss":"102","/:<&":"103","/:&>":"104"};
                let str = "/::\\)|/::~|/::B|/::\\||/:8-\\)|/::<|/::$|/::X|/::Z|/::'\\(|/::-\\||/::@|/::P|/::D|/::O|/::\\(|/::\\+|/:--b|/::Q|/::T|/:,@P|/:,@-D|/::d|/:,@o|/::g|/:\\|-\\)|/::!|/::L|/::>|/::,@|/:,@f|/::-S|/:\\?|/:,@x|/:,@@|/::8|/:,@!|/:!!!|/:xx|/:bye|/:wipe|/:dig|/:handclap|/:&-\\(|/:B-\\)|/:<@|/:@>|/::-O|/:>-\\||/:P-\\(|/::'\\||/:X-\\)|/::\\*|/:@x|/:8\\*|/:pd|/:<W>|/:beer|/:basketb|/:oo|/:coffee|/:eat|/:pig|/:rose|/:fade|/:showlove|/:heart|/:break|/:cake|/:li|/:bome|/:kn|/:footb|/:ladybug|/:shit|/:moon|/:sun|/:gift|/:hug|/:strong|/:weak|/:share|/:v|/:@\\)|/:jj|/:@@|/:bad|/:lvu|/:no|/:ok|/:love|/:<L>|/:jump|/:shake|/:<O>|/:circle|/:kotow|/:turn|/:skip|/:oY|/:#-0|/:hiphot|/:kiss|/:<&|/:&>";
                let reg = new RegExp(str,'g');
                let result = string.replace(reg,function(r){
                    return '<img src="/images/face/'+qqfaceMap[r]+'.png" />';
                });
                return result
            }
        },
        computed: {
            user(){
                return this.$store.state.user;
            },

            tableList(){
                if (this.stateManager.refreshList||this.$store.state.on_line_weChat_id!=0) {
                    this.list.fetch({w_id:this.$store.state.on_line_weChat_id});
                    this.stateManager.refreshList = false;
                }
                return this.list;
            }
        }
    }
</script>